<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            height: 40px;
        }

        textarea {
            width: 100%;
        }

        .item {
            padding: 10px 0;
            border-bottom: 1px solid #919191;
        }

        .content {
            margin-top: 5px;
        }

        .remove {
            float: right;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../babel.min.js"></script>
<script type="text/babel">
    let bus = {
        list: [],
        emit(eventName, msg) {
            let index = this.list.findIndex((item) => {
                return item.eventName === eventName
            })
            if (index !== -1) {
                this.list[index].callback(msg)
            }
        },
        on(eventName, callback) {
            let obj = {
                eventName,
                callback
            }
            this.list.push(obj)
        }
    }
    class App extends React.Component {
        state = {
            msg: null
        }
        render() {
            return (
                <div className='box'>
                    <One />
                    <Child />
                </div>
            )
        }
    }

    class One extends React.Component {
        state = {
            name: '',
            content: ''
        }
        render() {
            let { name, content } = this.state;
            return (
                <div>
                    <h2>评论人：</h2>
                    <div>
                        <input type='text' value={name} onChange={(e) => {
                            this.setState({
                                name: e.target.value
                            })
                        }} />
                    </div>
                    <div>
                        <h2>评论内容：</h2>
                        <div>
                            <textarea rows="10" value={content} onChange={(e) => {
                                this.setState({
                                    content: e.target.value
                                })

                            }}></textarea>
                        </div>
                    </div>
                    <button onClick={() => this.send()}>发表</button>
                </div>
            )
        }
        send() {
            let msg = {
                name: this.state.name,
                content: this.state.content
            }
            bus.emit('getMsg', msg)
            this.setState({
                name: '',
                content: ''
            })
        }
    }
    class Child extends React.Component {
        state = {
            list: [
                {
                    name: '小明',
                    content: '学习使我快乐！！'
                }, {
                    name: '小红',
                    content: '好好学习 天天向上！！'
                }
            ]

        }
        render() {
            let { list } = this.state;
            return (
                <div>
                    <h1>留言板：</h1>
                    <div>
                        {
                            list.map((item, index) => {
                                return (
                                    <div key={index} className='item'>
                                        <div>
                                            作者：{item.name}
                                        </div>
                                        <div className='content'>
                                            内容：{item.content}
                                            <button className='remove' onClick={() => {
                                                list.splice(index, 1)
                                                this.setState({
                                                    list: list
                                                })
                                            }}>删除

                                            </button>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            )
        }
        componentDidMount() {
            // 参数一  事件名名称  参数二 回调函数
            bus.on('getMsg', (msg) => {
                console.log(msg)
                this.state.list.push(msg);
                this.setState({
                    list:this.state.list
                })
            })
        }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
</script>

</html>